import Vue from 'vue'
import {VCard,VImg,VExpansionPanels,VExpansionPanel,VExpansionPanelHeader,VExpansionPanelContent,VBtn} from 'vuetify/lib'
import {getAllVender,getAllVenderAns} from "@/api/vender";

interface IData {
    venderList: Array<any>
}
export default Vue.extend({
    name: 'VenderList',
    components: {
        'v-card': VCard,
        'v-img': VImg,
        'v-expansion-panels': VExpansionPanels,
        'v-expansion-panel': VExpansionPanel,
        'v-expansion-panel-header': VExpansionPanelHeader,
        'v-expansion-panel-content': VExpansionPanelContent,
        'v-btn': VBtn
    },
    data: (): IData => ({
        venderList: []
    }),
    mounted() {
        getAllVender()
            .then(res => {
                const {code,msg,data} = res as unknown as getAllVenderAns
                if(code === 200){
                    this.venderList = data
                }else{
                    console.log(msg)
                }
            })
    },
    methods: {
      goEx(vid: number){
          return () => {
              this.$router.push(`/vender?vid=${vid}`)
          }
      }
    },
    render(){
        return (
            <div >
                <div>
                    <v-expansion-panels tile={true}>
                        {
                            this.venderList?.map(item => {
                                return (
                                    <v-expansion-panel key={item.vId} style={{backgroundImage: 'linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%)'}}>
                                        <v-expansion-panel-header>
                                            <div>
                                                <img src={item.vImg} style={{width: '45vw'}} alt='logo'/>
                                            </div>
                                        </v-expansion-panel-header>
                                        <v-expansion-panel-content>
                                            <div>
                                                <div style={{textAlign: 'center',fontSize: '5vw',fontWeight: 'bold',margin: '1vh 0'}}>{item.vName}<span>({item.vtitle})</span></div>
                                                <div style={{textAlign: 'center',fontSize: '5vw',fontWeight: 'bold',margin: '1vh 0'}}>{item.vEnName}</div>
                                                <div style={{textIndent: '2rem',fontSize: '4vw',lineHeight: '3.5vh'}}>{item.vDesc}</div>
                                                <div style={{textAlign: 'center',margin: '1vh'}}>
                                                    <v-btn outlined={true} color={'#330867'} onclick={this.goEx(item.vId)}>进入专区</v-btn>
                                                </div>
                                            </div>
                                        </v-expansion-panel-content>
                                    </v-expansion-panel>
                                )
                            })
                        }
                    </v-expansion-panels>
                </div>
            </div>
        )
    }
})